<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<div id="container">
			<div class="ticket" v-for="tick in tickets">
				<input type="text" class="poortext" v-model="tick.total"/>
				<div class="separator"></div>
				<div style="margin-top: 0.5em;">
					<span style="color: red;font-weight: bold;margin-left: 1em;">*</span>
					<span>不含税金额(元):</span>
					<div><input type="text" class="poortext" v-model="tick.nottotal"/></div>
					<div class="separator"></div>
				</div>
			</div>
			<div id="firstfooter">
				<span @click="addticket">+增加发票明细</span>
			</div>
			<div style="margin-top: 0.5em;">
				<span style="color: red;font-weight: bold;margin-left: 1em;">*</span>
				<span>报销含税总金额(元):</span>
				<div><input type="text" class="poortext" v-model="total"/></div>
				<div class="separator"></div>
			</div>
			<div style="margin-top: 0.5em;">
				<span style="color: red;font-weight: bold;margin-left: 1em;">*</span>
				<span>报销含税总金额大写:</span>
				<div style="margin-left: 1em;"><span>{{totaluppercase}}</span></div>
				<div class="separator"></div>
			</div>
			<div style="margin-top: 0.5em;">
				<span style="color: red;font-weight: bold;margin-left: 1em;">*</span>
				<span>报销不含税总金额(元):</span>
				<div><input type="text" class="poortext" v-model="nottotal"/></div>
				<div class="separator"></div>
			</div>
			<div style="margin-top: 0.5em;">
				<span style="color: red;font-weight: bold;margin-left: 1em;">*</span>
				<span>报销不含税总金额大写:</span>
				<div style="margin-left: 1em;"><span>{{totaluppercase}}</span></div>
				<div class="separator"></div>
			</div>
			
			<div style="margin-top: 0.5em;">
				<span style="color: red;font-weight: bold;margin-left: 1em;">*</span>
				<span>报销事情原由:</span>
				<div><input type="text" class="poortext" v-model="reason" placeholder="请输入"/></div>
				<div class="separator"></div>
			</div>
			<div style="margin-top: 0.5em;">
				<span style="color: red;font-weight: bold;margin-left: 1em;">*</span>
				<span>附件:</span>
			</div>
			<div id="firstfooter" style="">
					<input type="file" id="chooseimg" @change="change" style="display: none;"/>
					<span @click="choosefile">+增加发票明细</span>
			</div>
			<div style="display: flex;align-items: center;justify-content: flex-start;" v-for="name in filenames">
<!-- 				<img v-for="item in images" style="width: 4em;height: 4em;"/> -->
					<span>{{name}}</span>
			</div>
		</div>
		<script>
				var vm = new Vue({
					el: '#container',
					data:{
						tickets: [{total: "", nottotal :"0"}],
						total: "",//报销含税总金额
						nottotal: "",
						reason: "",
						images: [],
						filenames: []
					},
					methods: {
						addticket: function () {
							
							this.tickets.push({total: "",nottotal: "0"})
						},
						addattachment: function () {
							window.location = "images://"
						},
						choosefile: function () {
							document.getElementById('chooseimg').click()
						},
						change: function () {
							var file = document.getElementById('chooseimg');
							var that = this;
							for (var i = 0; i < file.files.length;i++) {
								var f = file.files[i]
								that.filenames.push(f.name)
//								var imgFile = file.files[0]
//								var fr = new FileReader()
//								fr.onload = function () {
//									that.images.push(fr.result);
//								}
//								fr.readAsDataURL(imgFile)
							}
						}
					},
					computed: {
						totaluppercase: function () {
							return '-'
						},
						nottotaluppercase: function () {
							return '-'
						}
					}
					
				});
			</script>
	</body>
	<style>
		.poortext{
			margin-left: 2em;
			height: 2em;
			border: none;
			outline: none;
		}
		.separator{
			margin-left: 1em;
			height: 1px;
			background-color: #999999;
		}
		#firstfooter{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 4em;
			font-size: 1em;
			color: rgb(66, 112, 175);
		}
	</style>
</html>
